<template>
  <div class="service">
    <div class="service-content">
      <div class="serviceProgress">
        <span class="title">售后进度</span>

        <div :class="['service-progress', { reject: serviceData.detail.backCheck === 'REFUSE_BACK' }, { completed: serviceData.detail.backCheck === 'CONFIRM_RECEIPT' }, { completed: serviceData.detail.backCheck === 'CANCELED' }]">
          <span v-if="serviceData.detail.backCheck === 'BACK_APPLY'">等待商家审核</span>
          <span v-if="serviceData.detail.backCheck === 'REFUSE_BACK'">商家拒绝售后申请</span>
          <span v-if="serviceData.detail.backCheck === 'AGREE_BACK'">商家同意退款<span class="tip">（请根据退货信息将售后商品退回，并填写物流单号）</span></span>
          <span v-if="serviceData.detail.backCheck === 'DELIVERED'">退回商品已发货</span>
          <span v-if="serviceData.detail.backCheck === 'REFUND'">商家已退款</span>
          <span v-if="serviceData.detail.backCheck === 'RECEIVED'">商家已收货</span>
          <span v-if="serviceData.detail.backCheck === 'CONFIRM_RECEIPT'">已完成</span>
          <span v-if="serviceData.detail.backCheck === 'CANCELED'">已关闭</span>

          <span class="back-detail" @click="onViewDetailClick">售后明细</span>
        </div>
      </div>

      <!-- 商家拒绝 -->
      <div v-if="serviceData.detail.backCheck === 'REFUSE_BACK'">
        <div class="back-change">
          <span class="title">拒绝理由</span>
          <div class="reason">
            <p>{{ serviceData.detail.refuseReason }}</p>
          </div>
        </div>
      </div>

      <!-- 商家同意退款 -->
      <div v-if="serviceData.detail.backCheck === 'AGREE_BACK'">
        <div class="address">
          <span class="title">退货地址</span>
          <div class="address-info">
            <span>{{ serviceData.detail.backShippingAddress }}</span>
            <span>{{ serviceData.detail.backShippingPerson }}</span>
            <span>{{ serviceData.detail.backShippingMobile }}</span>
          </div>
        </div>

        <div class="track">
          <span class="title">填写物流单号</span>
          <el-form ref="formRef" :model="serviceData.form" :show-message="false">
            <el-form-item prop="trackNumber" required>
              <el-input class="site-input" v-model="serviceData.form.trackNumber" placeholder="请填写物流单号"></el-input>
            </el-form-item>
          </el-form>
          <Button class="button" label="提交" type="warning" @click="onSubmitNumberClick" />
        </div>
      </div>

      <!-- 退回商品已发货 -->
      <div v-if="serviceData.detail.backCheck === 'DELIVERED'">
        <p class="trackNumber"><span class="title">物流单号：</span> {{ serviceData.detail.trackingNumber }}</p>
      </div>

      <!-- 商家已退款 -->
      <div v-if="serviceData.detail.backCheck === 'REFUND'">
        <div class="refund">
          <span class="title">退款凭证</span>
          <div class="proof">
            <el-image class="proof-img" :src="serviceData.detail.backPayProof" :preview-src-list="[serviceData.detail.backPayProof]"> </el-image>
            <Button label="确认收款" class="confirm-btn" type="warning" @click="onRefundProofClick" />
          </div>
        </div>
      </div>

      <div class="service-info">
        <p class="info-title">售后信息</p>
        <div class="service-type">
          <span class="title">售后类型</span>
          <span class="tip">退货退款</span>
        </div>

        <div class="service-reason">
          <span class="title">申请售后原因</span>
          <p>{{ serviceData.detail.backRemark }}</p>
        </div>

        <div class="service-order">
          <span class="title">售后商品</span>

          <Table :type="route.query.type" :info="serviceData.detail" :list="serviceData.list" />
        </div>
        <div class="back_btns" v-if="serviceData.detail.backCheck === 'REFUSE_BACK'">
          <Button label="修改申请" type="warning" class="button edit_btn" @click="onChangeRequestClick" />
          <Button label="关闭售后" type="warning" class="button" @click="onCloseServiceClick" />
        </div>
      </div>
    </div>
  </div>
  <History v-model:visible="historyVisible" :list="serviceData.backHistoryList" />
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import Button from '@/components/button/button.vue'
import Table from './table.vue'
import History from './history.vue'

const route = useRoute()
const router = useRouter()
const formRef = ref()
const serviceData = reactive({
  list: [],
  backHistoryList: [],
  detail: {},
  form: {}
})

const historyVisible = ref(false)

const closedAfterSale = async () => {
  let { err } = await api.post(`/medinstrument/site/back/closedAfterSale?orderId=${route.query.orderId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    router.push('/allOrder')
  }
}

const refundProof = async () => {
  let { err } = await api.post(`/medinstrument/site/back/confirmPay?orderId=${route.query.orderId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('确认收款成功')
    loadData()
  }
}

const deliver = async () => {
  let { err } = await api.post(`/medinstrument/site/back/deliver?orderId=${route.query.orderId}&trackingNumber=${serviceData.form.trackNumber}`)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('发货成功')
    loadData()
  }
}

const loadData = async () => {
  let { data, err } = await api.get(`/medinstrument/site/back/getBackDetails?orderId=${route.query.orderId}`)

  if (err) {
    ElMessage.error(err)
  } else {
    serviceData.detail = data
    serviceData.list = data.backOrderGoodsList
    serviceData.backHistoryList = data.backHistoryList?.map((e) => {
      return {
        ...e,
        historyVal: JSON.parse(e.historyVal)
      }
    })
  }
}

const onSubmitNumberClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      deliver()
    }
  })
}

const onRefundProofClick = () => {
  refundProof()
}

const onCloseServiceClick = () => {
  ElMessageBox.confirm('确定要关闭此次售后吗？', '系统', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    cancelButtonClass: 'cancelButtonClass',
    confirmButtonClass: 'confirmButtonClass',
    type: 'warning'
  })
    .then(() => {
      closedAfterSale()
    })
    .catch(() => {})
}

const onChangeRequestClick = () => {
  router.push({ path: '/AfterSale', query: { orderId: route.query.orderId } })
}

const onViewDetailClick = () => {
  historyVisible.value = true
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.service {
  width: 1080px;
  margin: 10px auto;

  .service-content {
    .serviceProgress,
    .service-type,
    .service-reason,
    .service-order,
    .address,
    .track,
    .trackNumber,
    .refund,
    .back-change {
      display: flex;
      align-items: center;

      .title {
        display: inline-block;
        width: 84px;
        height: 20px;
        line-height: 20px;
        margin-right: 20px;
      }
    }

    .serviceProgress,
    .address,
    .track,
    .refund,
    .back-change {
      .title {
        font-weight: 600;
      }
    }
    .service-info {
      margin-top: 20px;

      .info-title {
        font-weight: 600;
      }
    }

    .serviceProgress,
    .address,
    .track,
    .refund,
    .back-change {
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border-color);
    }

    .serviceProgress {
      margin: 20px 0;
      position: relative;

      .actived {
        padding: 10px 12px;
        border: 1px solid var(--color-primary);
        margin-right: 20px;
        text-align: center;
        line-height: 20px;
        position: relative;
        cursor: pointer;
      }

      .service-progress {
        padding: 10px 0 10px 12px;
        background-color: var(--color-background);
        color: var(--color-primary);
        width: calc(100% - 104px);

        .tip {
          font-size: 12px;
          color: var(--color-text);
          margin-left: 6px;
        }

        &.completed {
          background-color: #f0f9eb;
          color: #67c23a;
        }

        &.reject {
          background-color: #fef0f0;
          color: #f56c6c;
        }
      }

      .back-detail {
        cursor: pointer;
        margin-left: 30px;
        color: var(--color-primary);
      }
    }

    .address {
      .address-info {
        width: 100%;
        color: var(--span-color-text);
        border: 1px solid var(--border-color);
        padding: 10px 0 10px 20px;
        margin-left: 10px;
        box-sizing: border-box;

        .consignee {
          margin-left: 20px;
        }

        span {
          margin-right: 10px;
        }
      }
    }

    .track {
      padding-top: 20px;

      .site-input {
        width: 325px;
      }
      .el-form {
        .el-form-item {
          margin-bottom: 0;
        }
      }
      .button {
        width: 60px;
        height: 40px;
        margin-left: 12px;
      }
    }

    .refund {
      .proof {
        display: flex;
        flex-direction: column;

        .proof-img {
          width: 88px;
          height: 88px;
        }

        .confirm-btn {
          width: 88px;
          height: 40px;
          margin-top: 12px;
        }
      }

      // .tip {
      //   color: #f56c6c;
      //   font-size: 12px;
      // }
    }

    .back-change {
      .button {
        margin-top: 20px;
      }
      p {
        width: 400px;
        height: 60px;
        border: 1px solid var(--border-color);
        padding: 10px 0 10px 12px;
        box-sizing: border-box;
        color: var(--span-color-text);
      }
    }

    .service-type {
      margin: 20px 0;

      .tip {
        display: inline-block;
        width: 80px;
        height: 40px;
        line-height: 40px;
        border: 1px solid var(--border-color);
        text-align: center;
        color: var(--span-color-text);
      }
    }
    .service-reason {
      margin-bottom: 20px;

      p {
        width: calc(100% - 104px);
        border: 1px solid var(--border-color);
        padding: 10px 0 10px 12px;
        box-sizing: border-box;
        color: var(--span-color-text);
      }
    }

    .service-order {
      .table {
        border-collapse: collapse;
        width: calc(100% - 104px);

        th {
          width: 160px;
        }
        .table_header_title {
          height: 42px;
          background-color: var(--color-background);
          color: var(--span-color-text);
          margin-bottom: 20px;
        }

        .table_tbody {
          td.noborder {
            border: 0;
            height: 20px;
          }

          td.noborder:first-child {
            border-left: none;
          }

          tr {
            td {
              line-height: 18px;
              text-align: center;
            }

            td:first-child {
              border-left: 1px solid var(--border-color);
            }

            td.last {
              border-right: 1px solid var(--border-color);
            }

            td.border {
              border-bottom: 1px solid var(--border-color);
              padding: 10px 35px 13px 54px;
              .remark {
                display: flex;
                justify-content: space-between;

                .title {
                  font-weight: 500;
                  line-height: 16px;
                }

                .price {
                  font-weight: 600;
                  line-height: 18px;
                  color: var(--color-primary);
                }
              }
            }

            td.amount-edit {
              border-left: 1px solid var(--border-color);
              border-right: 1px solid var(--border-color);
              position: relative;
            }

            td.goods-price {
              font-weight: 600;
              color: var(--color-primary);
            }

            .edit-btn {
              position: absolute;
              right: 0;
              top: 0;
              display: none;
              background-color: var(--color-primary);
              color: #fff;
              font-size: 12px;
              border: none;
            }

            td.amount-edit:hover {
              border: 1px dashed var(--color-primary);

              .edit-btn {
                display: block;
              }
            }
          }

          .info {
            display: flex;
            align-items: center;
            padding: 12px 0 12px 10px;
            height: 42px;
            box-sizing: border-box;
            border-top: 1px solid var(--border-color);
            background-color: #f9f9f9;

            .order,
            .supplier {
              display: flex;
              align-items: center;
              height: 18px;
              line-height: 18px;
            }

            .order {
              .goods-outer-checkbox {
                width: 14px;
                height: 14px;
              }

              .order-time {
                margin: 0 12px;
              }

              .order-code {
                color: var(--span-color-text);
                font-weight: 500;
              }
            }

            .supplier {
              margin-left: 90px;

              .store-icon {
                width: 20px;
                height: 20px;
                margin: 0 7px 0 11px;
              }
            }
          }

          .goods {
            td {
              border-bottom: 1px solid var(--border-color);
              padding: 20px 0 20px 10px;

              .goods-first {
                display: flex;
                align-items: center;

                .goods-info {
                  display: flex;
                  align-items: center;

                  .goods-img {
                    display: inline-block;
                    width: 72px;
                    height: 72px;
                    margin-right: 12px;
                    margin-left: 30px;
                  }

                  .goods-name {
                    width: 180px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .back_btns {
      display: flex;
      justify-content: flex-end;
      margin: 30px 0 0 103px;

      .button {
        width: 112px;
        height: 50px;
        border-radius: 2px;
        font-size: 20px;
        line-height: 28px;
        font-weight: 600;
        cursor: pointer;
      }

      .edit_btn {
        border: 1px solid #efad41;
        background-color: #fff9ee;
        color: var(--color-primary);
      }
    }
  }
}
</style>
